<my-pageheader></my-pageheader>

<mat-card style="margin: 20px 20px 50px 20px">
    <h2 align="center">短文词云生成</h2>
    <br><br>

    <div class="row justify-content-center">
        <mat-card style="width: 90%">
            <br>
            <mat-form-field style="width: 100%">
                <textarea matInput style="height: 200px" [(ngModel)]="sentence" placeholder="原文"></textarea>
            </mat-form-field>
            <br>

        </mat-card>
    </div>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <div class="row justify-content-center">
        <button mat-raised-button color="primary" (click)="classify()" [disabled]="sending || !sentence ">
            生成图片
        </button>
    </div>
    <div class="row justify-content-center">

        <mat-card style="width: 90%; margin-top: 20px">
            <p *ngIf="!result && !sending">词云图片</p>
            <p *ngIf="sending">正在计算...</p>
            <mat-spinner *ngIf="sending"></mat-spinner>
            <p style="font-size: 36px" *ngIf="!sending && result">
                &nbsp;&nbsp;&nbsp;&nbsp;
                <img style="max-width: 100%" src="{{result}}" alt="">
            </p>
        </mat-card>
    </div>
</mat-card>
